<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <script>
	    var html = document.getElementsByTagName('html')[0];
	    html.style.fontSize = html.clientWidth / 3.75 + "px";
    </script>
	<title>供应时间</title>
	<link rel="stylesheet" type="text/css" href="../libs/mobiscroll/css/mobiscroll.javascript.min.css">
    <link rel="stylesheet" href="../static/css/datetime.css" />
    <style type="text/css">
		.demo-date{
			display:flex;
			align-items: center;
		}
		.label{
			width:.8rem;
		}
		.date{
			flex:1;
		}
		.labels{
			width: .15rem;
		}
		.date.disabled .mbsc-sc-itm{
			color: #9d9d9d;
		}
		.datatime_time{
			position: relative;
		}
		.seleBtn,.longTime{
			position: absolute;
			display: inline-block;
			width: 20px;
			height: 20px;
			right: 20px;
		}
		.selected{
			background:url('../static/images/selected.png') no-repeat center ;
			background-size:20px ;
		}
		.unselected{
			background:url('../static/images/select.png') no-repeat center ;
			background-size:20px ;
		}
		.longTime{
			width: 24px !important;
			height: 24px !important;
			right: 19px;
			opacity: 0;
		}
	</style>
</head>
<body>
   <div id="">
   	    <div class="datatime_time">
    	    <p>长期供货
    	    	<span class="seleBtn selected"></span>
    	    	<input type="checkbox" class="longTime" checked/></p>
        </div>
        <div class="datatime_cleader demo-date">
        	<p class="label">开始时间</p>
        	<div id="date-begin" class="date disabled"></div>
        	<p class="labels"></p>
        </div>
        <div class="datatime_cleader demo-date">
        	<p class="label">结束时间</p>
        	<div id="date-end" class="date disabled"></div>
        	<p class="labels"></p>
        </div>
        <div class="datatime-btn">
        	<button class="datatime_btns">保存</button>
        </div>
        <script src="../libs/jquery.min.js"></script>
        <script type="text/javascript" src="../libs/mobiscroll/js/mobiscroll.javascript.min.js"></script>
        <script type="text/javascript">
        $(function() {
        	var now = new Date();
        	var opt = {
        		yearSuffix: '年',
        		monthSuffix: '月',
        		daySuffix: '日',
        		theme: 'auto',
        		lang: 'zh',
        		display: 'inline',
        		rows: 3,
        		max: new Date(now.getFullYear() + 100, now.getMonth(), now.getDate())
        	};

        	function getDayAfterMonth(dt){
    			var year = dt.getFullYear() ,month = dt.getMonth(), date = dt.getDate();
    			var result = new Date();
    			if(month==11){
    				result.setYear(year+1);
    				result.setMonth(0);
    			}else{
    				result.setYear(year);
    				result.setMonth(month+1);
    			}
    			result.setDate(date);
        		return result;
        	}

        	var dateBegin = mobiscroll.date('#date-begin', $.extend({
        		defaultValue: new Date(),
        		onChange: function(event, inst){
        			$('.longTime').removeProp('checked').trigger('change');
        			changeClass()
        			dateEnd.setVal(getDayAfterMonth(inst.getVal(true)));
        		}
        	},opt));

        	var dateEnd = mobiscroll.date('#date-end', $.extend({
        		onChange: function(event, inst){
        			$('.longTime').removeProp('checked').trigger('change');
        			changeClass()
        		}
        	},opt));

        	dateEnd.setVal(getDayAfterMonth(now));

        	$('.longTime').on('change', function() {
        		var opt = {
        			readonly: $(this).prop('checked')
        		}
        		if (opt.readonly) {
        			$('.date').addClass('disabled');
        			$('.seleBtn').removeClass('unselected').addClass('selected');
        		} else {
        			$('.date').removeClass('disabled');
        			$('.seleBtn').removeClass('selected').addClass('unselected');
        		}
        	});
			function changeClass(){
				if($('.longTime').is(':checked')){
					$('.seleBtn').removeClass('selected').addClass('unselected');
				}else{
					$('.seleBtn').removeClass('unselected').addClass('selected');
				}
			}
        });
	</script>       
   </div>
</body>
</html>

